<template>
  <a-card title="糖尿病合并症" :bordered="false">
    <a-spin :spinning="loading">
      <a-tabs tab-position="top" v-model="active">
        <a-tab-pane key="1" tab="高血压病" class="tab-bg-color">
          <HighBloodPressure ref="comorbidity1" :comorbidity="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="2" tab="高脂血症" class="tab-bg-color">
          <Hyperlipidemia ref="comorbidity2" :comorbidity="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="3" tab="心血管疾病" class="tab-bg-color">
          <Cardiovascular ref="comorbidity3" :comorbidity="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="4" tab="脑血管疾病" class="tab-bg-color">
          <Cerebrovascular ref="comorbidity4" :comorbidity="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="5" tab="周围血管疾病" class="tab-bg-color">
          <PeripheralVascular ref="comorbidity5" :comorbidity="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import HighBloodPressure from './comorbidity/HighBloodPressure'
import Hyperlipidemia from './comorbidity/Hyperlipidemia'
import Cardiovascular from './comorbidity/Cardiovascular'
import Cerebrovascular from './comorbidity/Cerebrovascular'
import PeripheralVascular from './comorbidity/PeripheralVascular'

export default {
  name: 'Comorbidity',
  components: {
    HighBloodPressure,
    Hyperlipidemia,
    Cardiovascular,
    Cerebrovascular,
    PeripheralVascular
  },
  data() {
    return {
      url: {
        getComorbidity: '102/17/1021702',
        updateComorbidity: '102/17/1021701',
        confirmComorbidity: '102/10/1021703'
      },
      type: '1',
      active: '1',
      currentPatient: {},
      loading: true,
      text: '此操作代表你已完成了页面的填写，是否继续？'
    }
  },
  created() {
    this.getPatientInfo()
      .catch(error => {
        console.log(error)
      })
      .finally(_ => {
        this.loading = false
      })
  },
  methods: {
    confirm(type) {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
        type,
        isFinished: 1
      }
      postAction(this.url.confirmComorbidity, params)
        .then(res => {
          if (res.success) {
            this.$message.success('页面已确认', 5)
            type != '5' && (this.active = JSON.stringify(+type + 1))
          }
        })
        .finally(_ => {
          this.$refs['comorbidity' + type].saveLoading = false
        })
    },
    async getPatientInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      const res = await getAction(this.url.getComorbidity, { patientId })

      if (res.success) {
        this.currentPatient = await res.result
        console.log(this.currentPatient)
        console.log('成功获取患者糖尿病合并症信息')
      } else {
        console.log('获取患者糖尿病合并症信息失败，自动为该患者新建一个空档案')
        const newRecord = await postAction(this.url.updateComorbidity, {
          patientId: patientId
        })

        if (newRecord.success) {
          this.getPatientInfo()
        }
      }
    },
    onSave(type) {
      const params = JSON.parse(JSON.stringify(this.currentPatient))
      postAction(this.url.updateComorbidity, params)
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            type != '5' && (this.active = JSON.stringify(+type + 1))
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.$refs['comorbidity' + type].saveLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.tab-bg-color {
  padding: 15px;
}
</style>

